<template>
  <div class="my-container">
    <shop-bar></shop-bar>
    <product-bar></product-bar>
    <el-container class="main-container">
      <el-container class="letf-container">
        <el-main class="letf-container-individual">
          <el-card>
            <!--            个人信息-->
            <el-row :span="24">
              <el-col :span="10">
                <el-avatar src="https://th.bing.com/th/id/OIG.Nxy8n3bgFil6zVNN1v48?pid=ImgGn" :size="100"></el-avatar>
              </el-col>
              <el-col :span="14">
                <h2>小布</h2>
                <p> 人虽欲自绝 其何伤于日月乎</p>
                <el-row :span="24">
                  <el-col :span="10"><span style="font-size: 11px">C币：11</span></el-col>
                  <el-col :span="10"><span style="font-size: 11px">粉丝：11</span></el-col>
                </el-row>

              </el-col>
            </el-row>
          </el-card>
        </el-main>
        <el-container class="letf-container-menu">
          <!--菜单-->
          <el-main class="letf-container-menu-main">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="连续对话">
                <el-switch v-model="form.delivery"></el-switch>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </el-container>
      <el-container class="center-container">
        <!--核心内容-->
        <el-header class="container-settings-header"><h2>ChatGpt3.5</h2></el-header>
        <el-divider style="width: 100%"></el-divider>
        <el-main>
          <el-scrollbar wrap-class="message-list-wrap">
            <div class="message-list">
              <div v-for="message in messages" :key="message.id" class="message">
                <span v-if="message.type">
                  <el-row :span="24" :gutter="10" class="message-content-left">
                    <el-col :span="3"><div class="avatar">{{ message.sender }}</div></el-col>
                    <el-col :span="calculateSpan(message.text)"> <div class="message-bubble" v-html="message.text"></div></el-col>
                  </el-row>
                </span>
                <span v-else>
                    <el-row :span="24" :gutter="10" class="message-content-right">
                      <el-col style="float: right" :span="3"><div style="float: right" class="avatar">{{
                          message.sender
                        }}</div></el-col>
                      <el-col style="float: right" :span="calculateSpan(message.text)"><div class="message-bubble"  v-html="message.text"></div></el-col>

                  </el-row>
                </span>

              </div>
            </div>
          </el-scrollbar>
        </el-main>
        <el-divider style="width: 100%"></el-divider>
        <el-footer>
          <el-form ref="chatForm" :model="form" label-width="80px">
            <el-row :span="24">
              <el-col :span="2">
                <el-button @click="sendMessage" type="primary">发送</el-button>
              </el-col>
              <el-col :span="21">
                <el-input v-model="userInput"></el-input>
              </el-col>
            </el-row>
          </el-form>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import chatApi from "@/api/user/chat_api";
import {marked} from "marked";
export default {
  components: {},
  data() {
    return {
      form: {delivery:false},
      messages: [],
      userInput: ''
    };
  },
  created() {
    this.init();
  },
  methods: {
    handleSelect(select) {
      this.center_page = select
    },
    init() {
    },
    /**
     * 发送消息
     */
    sendMessage() {
      const messageText = this.userInput.trim();

      if (messageText !== '') {
        const newMessage = {
          id: this.messages.length + 1,
          sender: 'You',
          text:this.parseMarkdown(messageText),
          type: false
        };

        this.messages.push(newMessage);
        this.scrollToBottom();
        this.userInput = '';
        chatApi.sendMessage(messageText).then(res=>{
          const chatMessage = {
            id: this.messages.length + 1,
            sender: 'Chat',
            text: this.parseMarkdown(res.data.data) ,
            type: true
          };
          this.messages.push(chatMessage);
          console.log( )
        })

      }
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const messageList = this.$el.querySelector('.message-list');
        messageList.scrollTop = messageList.scrollHeight;
      });
    },
    /**
     * 转换marked
     * @param markdownText
     * @returns {*}
     */
    parseMarkdown(markdownText) {
     return marked(markdownText);
    },
    /**
     * 转换消息长度
     * @param content
     * @returns {number}
     */
    calculateSpan(content) {
      // 计算内容长度，可以根据具体需求进行调整
      const contentLength = content.length;
      console.log(contentLength)
      // 根据内容长度计算所需的span值
      if (contentLength < 10) {
        return 4; // 设置为较小的宽度
      } else if (contentLength < 20) {
        return 8; // 设置为中等宽度
      } else {
        return 15; // 设置为较大的宽度
      }
    },

  }
  // ...
};
</script>
<style scoped>
.letf-container {
  width: 30%;
  display: flex;
  flex-direction: column;
}

.center-container {
  width: 68%;
  margin-top: 1.5%;
  margin-right: 1.5%;
  margin-bottom: 1.5%;
  height: 50em;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.letf-container-individual {
  height: 25em;
}

.letf-container-menu {
  width: 100%;

  height: 100%;
}


.letf-container-menu-main {
  height: 100%;
}


.chat-container {
  width: 400px;
  height: 500px;
  border: 1px solid #ccc;
  overflow-y: auto;
}

.message-list-wrap {
  padding: 10px;
}

.message {
  width: 100%;
  margin-bottom: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  background-color: #ccc;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.message-content-left {
  width: 100%;
  flex-direction: column;
}

.message-content-right {
  width: 100%;
  flex-direction: column;

}

.message-content-right el-col {
  margin-left: 1em;
  display: flex;
  justify-content: flex-end;
}

.message-content-right .message-bubble {
  display: flex;
  justify-content: flex-end;
}


.sender-name {
  font-weight: bold;
}

.message-bubble {
  display: inline-block;
  padding: 5px 10px;
  background-color: #eee;
  border-radius: 10px;
  word-wrap: break-word;
}

</style>